<template>
  <div class="com-container" @click="reverMap">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>

<script>
import { getProvinceMapInfo } from "../utils/map_utils";
export default {
  name: "",

  data() {
    return {
      echarts: null,
      echartsInit: null,
      allData: null,
      // mapData: {}
    };
  },

  mounted() {
    this.Init();
    this.getData();
    window.addEventListener("resize", this.screenData);
    this.screenData();
  },

  methods: {
    reverMap() {
      const reverOption = {
        geo: {
          map: "china"
        }
      };
      this.echartsInit.setOption(reverOption);
    },

    Init() {
      this.echarts = require("echarts");
      this.echartsInit = this.echarts.init(this.$refs.map_ref, "chalk");
      //获取地图矢量数据
      this.axios.get("/api/ratings").then(response => {
        const chinaMap = response.data;

        // console.log(this.allData);

        this.echarts.registerMap("china", chinaMap.data); //注册地图矢量数据
        const InitOption = {
          title: {
            text: "|商家分布",
            left: "20", //20px
            top: "20"
          },
          legend: {
            left: "5%",
            bottom: "5%",
            orient: "vertical" //图例垂直排列
          },
          geo: {          //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
            type: "map",
            map: "china",
            top: "5%",
            bottom: "5%",
            itemStyle: {
              areaColor: "#2E72BF",
              boderColor: "#333"
            }
          }
        };
        this.echartsInit.setOption(InitOption);
      });

      this.echartsInit.on("click", arg => {
        const argArr = getProvinceMapInfo(arg.name);              //这是导入map_utils。js里的方法
        //console.log(argArr)
        
          this.axios.get(argArr.path).then(response => {
          const dataArr = response.data;
          //this.mapData[argArr.key] = dataArr;
          //console.log(this.mapData[argArr.key]);
          this.echarts.registerMap(argArr.key, dataArr);
          const changeOption = {
            geo: {
              map: argArr.key
            }
          };
          this.echartsInit.setOption(changeOption);
          
        });
        
        // this.echarts.registerMap(argArr.key, dataArr);
        //   const changeOption = {
        //     geo: {
        //       map: argArr.key
        //     }
        //   };
        //   this.echartsInit.setOption(changeOption);
        
      });
    },

    getData() {
      this.axios.get("http://127.0.0.1:8888/api/map").then(response => {
        this.allData = response.data;
        //console.log(this.allData)
        this.upData();
      });
    },

    upData() {
      const legendArr = this.allData.map(item => {
        return item.name;
      });
      const seriesArr = this.allData.map(item => {
        return {
          type: "effectScatter",
          name: item.name,
          data: item.children,
          coordinateSystem: "geo",               //如果想在地图中显示散点数据，我们需要配置， coordinateSystem:'geo'
          rippleEffect: {
            //涟漪动画效果设置
            scale: 5,
            brushType: "stroke"
          }
        };
      });
      const upDataOption = {
        legend: {
          data: legendArr
        },
        series: seriesArr
      };
      this.echartsInit.setOption(upDataOption);
    },

    screenData() {
      const titleSize = (this.$refs.map_ref.offsetWidth / 100) * 3.6;
      const screenOption = {
        title: {
          textStyle: {
            fontSize: titleSize
          }
        },
        legend: {
          itemWidth: titleSize / 2,
          itemHeight: titleSize / 2,
          itemGap: titleSize / 2, //图列间距
          textStyle: {
            fontSize: titleSize / 2
          }
        }
      };
      this.echartsInit.setOption(screenOption);
      this.echartsInit.resize();
    }
  }
};
</script>
